<!-- Dom模板 -->
<template>
  <div class="history_box">
    <!-- Dom内容 -->
    <div class="history_top">
       <p class="iconfont icon-iconfontyoujiantou-zuo" @click="close"></p>
      <h2>播放历史</h2>
      <div class="hist_righ">
        <p class="iconfont icon-lajitong" @click="delect" v-show="!show"></p>
      </div>
    </div>
        <div v-if="show" class="all"><input type="checkbox" v-model="meth">全选 </div>
    
    <div
      class="history-main"
      v-for="(item, index) in $store.getters['login/history']"
      :key="index"
      ref="hisMain"
    >
      <div class="history_main_time" ref="time">{{createTime(item.time)}}</div>
      <div class="history_main_row">
        <div class="history_left">
          <input type="checkbox" v-if="show" v-model="item.check">
          <img :src="item.book_img_url" />
          <div class="history_center">
            <h3>{{ item.bookname }}</h3>
            <p>第{{ item.diversity }}章</p>
          </div>
        </div>
       
      </div>
    </div>
       <div class="quedel" v-if="show">
             <button @click="qux">取消</button>
             <span></span>
             <button @click="queren">确认删除</button>
       </div>
        <div v-if="emplay" class="kong">
          <p class="iconfont icon-shoutidai">?</p>
          <p>你还没有播放的内容哦</p>
        </div>
       
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  props:["shows"],
  name: "",
  data() {
    return {
      msg: "测试",
      show:false,
      emplay:false
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
 
    // console.log(this.$store.state.login.loginuserMsg.viewing.cont);   //收藏的数组
 
      // console.log(this.$store.getters)
      if(this.$store.getters['login/history'].length===0){
            this.emplay = true 
      }
      
  },
  // Vue方法定义
  methods: {
    createTime(t){
        let time = null 
        let date = new Date(Number(t))
        let year = date.getFullYear();//获取当年
        let month = date.getMonth() + 1 ;//获取当月
        let day = date.getDate();//获取当日
        let hours = date.getHours();//当前小时
        let minus = date.getMinutes();
        return time = year + '年' + month +'月' +day +'日'+hours+'时'+minus+'分'
        console.log(this.show)
    },
    delect(){
      if(sessionStorage.getItem("userId")){
         this.show= true
      }
       
    },
    queren(){
          this.$store.state.login.loginuserMsg.viewing.cont.forEach((item,index)=>{
            if(item.check){
              console.log(item);
                  this.$store.dispatch('bags/gethistory',{type:"del",viewingid:item.viewingid}).then(res=>{
                  this.$store.dispatch("login/getUser",{userid:sessionStorage.getItem("userId")})

                  })
            }
            
          })
    },
    qux(){
      this.show = false
    },
    close(){
      this.$emit("close",!this.shows)
    }
  },
  computed:{
    meth:{
      get(){
            return this.$store.state.login.loginuserMsg.viewing.cont.every((item,index)=>{
               return item.check
            })
      },
      set(val){
            this.$store.state.login.loginuserMsg.viewing.cont.forEach((item,index)=>{
               return item.check = val 
            })
      }
    }
  }
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.kong{
  width:50%;
  height:250px;
  line-height:50px;
  margin-left:25%;
  margin-top:100px;
}
.kong p:nth-child(1){
  width:50px;
  height:50px;
  border-radius: 50%;
  font-size:35px;
  transform:rotate(-30deg);
  padding-left:60px;
}
.kong p:nth-child(2){
  font-size:16px;
  font-family: PingFangSC-regular;
}
.kong p:nth-child(3){
 margin-left:50px;
}
.quedel{
  width:100%;
  height:45px;
  display:flex;
  justify-content: space-around;
  position:fixed;
  bottom:0;
  left:0;
  border-top:1px solid #cccccc;
}
.history_box input{
  width:15px;
  height:20px;
  border:1px solid rgb(192, 189, 189);
}
.all{
  width:95%;
  height: 25px;
  display:flex;
  align-items: center;
  margin-left:2.5%;
}

.quedel button{
  width:49%;
  line-height:45px;
  text-align: center;
  font-size:12px;
  border:none;
  background:white;
}
.quedel span{
  width:1px; 
  height:20px;
  background:#ccc;
  margin-top:12px;
}
.history_box {
  width: 100%;
  height:auto;
  padding-bottom:200px;
}
.history_top {
  width: 95%;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 2.5%;
}
.history_top h2{
  text-align: center;
  padding-left:25px;
}
.history_top > p {
  font-size: 25px;
}
.hist_righ {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.hist_righ p {
  font-size: 26px;
}

.history-main {
  width: 95%;
  margin-left: 2.5%;
  margin-top:10px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(236, 228, 228);
}
.history_main_time {
  width: 100%;
  text-align: left;
}
.history_main_row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top:8px;
}
.history_main_row img {
  width: 45px;
  height: 45px;
  border-radius: 5px;
}
.history_center {
  width: auto;
  margin-left: 10px;
}
.history_center p {
  color: #ccc;
}
.history_left {
  display: flex;
}
.history_left input{
  position: relative;;
  top:20%;
  left:-5px;
}
.history_main_row button {
  width: auto;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  border-radius: 35px;
  border: 1px solid #ccc;
  padding: 0 10px;
  background: white;
}
</style>